<template>
	<view class="page-container">
		<view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
		
		<!-- 自定义导航栏 -->
		<view class="nav-bar">
			<view class="nav-content">
				<view class="nav-left" @click="goBack">
					<u-icon name="arrow-left" color="#333" size="20"></u-icon>
				</view>
				<view class="nav-title">{{ pageTitle }}</view>
				<view class="nav-right"></view>
			</view>
		</view>
		
		<scroll-view class="content" scroll-y>
			<view class="page-content">
				<rich-text :nodes="pageContent"></rich-text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 0,
			pageId: '',
			pageTitle: '',
			pageContent: ''
		}
	},
	onLoad(options) {
		this.getStatusBarHeight()
		this.pageId = options.id || '1'
		this.loadPageContent()
	},
	methods: {
		// 获取适配的状态栏高度
		getStatusBarHeight() {
			const systemInfo = uni.getSystemInfoSync();
			let statusBarHeight = systemInfo.statusBarHeight || 0;
			
			// #ifdef MP-WEIXIN
			if (statusBarHeight === 0) {
				statusBarHeight = 25;
			}
			statusBarHeight = Math.max(statusBarHeight, 22);
			// #endif
			
			// #ifdef MP-ALIPAY
			if (statusBarHeight === 0) {
				statusBarHeight = 20;
			}
			// #endif
			
			// #ifdef H5
			statusBarHeight = 0;
			// #endif
			
			this.statusBarHeight = statusBarHeight;
		},
		
		goBack() {
			uni.navigateBack()
		},
		loadPageContent() {
			// 根据页面ID加载不同的内容
			const pageData = {
				'1': {
					title: '关于我们',
					content: `
						<h2>关于备忘录应用</h2>
						<p>备忘录是一款简洁易用的本地备忘录应用，致力于为用户提供安全、高效的信息记录和管理体验。</p>
						
						<h3>我们的理念</h3>
						<p>我们相信简洁的设计和流畅的用户体验能够让信息记录变得更加轻松愉快。</p>
						
						<h3>隐私保护</h3>
						<p>所有数据都存储在您的设备本地，我们不会收集任何个人信息。</p>
					`
				},
				'2': {
					title: '使用帮助',
					content: `
						<h2>使用指南</h2>
						
						<h3>创建备忘录</h3>
						<p>1. 点击首页的"+"按钮</p>
						<p>2. 输入标题和内容</p>
						<p>3. 选择分类和重要程度</p>
						<p>4. 点击保存</p>
						
						<h3>编辑备忘录</h3>
						<p>点击任意备忘录即可进入编辑模式</p>
						
						<h3>删除备忘录</h3>
						<p>在备忘录详情页面点击删除按钮</p>
					`
				},
				'3': {
					title: '用户协议',
					content: `
						<h2>用户服务协议</h2>
						
						<h3>1. 服务条款</h3>
						<p>欢迎使用备忘录应用。使用本应用即表示您同意本协议的所有条款。</p>
						
						<h3>2. 服务内容</h3>
						<p>本应用提供本地备忘录记录和管理服务。</p>
						
						<h3>3. 用户责任</h3>
						<p>用户应合法使用本应用，不得用于违法用途。</p>
						
						<h3>4. 免责声明</h3>
						<p>本应用仅提供信息记录功能，用户应自行备份重要数据。</p>
					`
				},
				'4': {
					title: '隐私政策',
					content: `
						<h2>隐私政策</h2>
						
						<h3>信息收集</h3>
						<p>我们不会收集您的任何个人信息。所有数据都存储在您的设备本地。</p>
						
						<h3>数据使用</h3>
						<p>您的备忘录数据仅用于应用功能，不会被传输到任何服务器。</p>
						
						<h3>数据安全</h3>
						<p>请妥善保管您的设备，定期备份重要数据。</p>
						
						<h3>政策更新</h3>
						<p>我们可能会不定期更新隐私政策，请关注相关变更。</p>
					`
				},
				'5': {
					title: '联系我们',
					content: `
						<h2>联系我们</h2>
						
						<h3>技术支持</h3>
						<p>如果您在使用过程中遇到问题，可以通过以下方式联系我们：</p>
						
						<h3>反馈渠道</h3>
						<p>• 应用内反馈：设置 -> 意见反馈</p>
						<p>• 邮件反馈：请通过应用内反馈功能提交</p>
						
						<h3>常见问题</h3>
						<p>请先查看应用内的帮助文档，大部分问题都能找到解答。</p>
					`
				}
			}
			
			const data = pageData[this.pageId] || pageData['1']
			this.pageTitle = data.title
			this.pageContent = data.content
		}
	}
}
</script>

<style lang="scss" scoped>
.page-container {
	min-height: 100vh;
	background: #f5f5f5;
}

.nav-bar {
	background: #fff;
	border-bottom: 1px solid #e0e0e0;
}

.nav-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 44px;
	padding: 0 15px;
}

.nav-left, .nav-right {
	width: 60px;
}

.nav-title {
	font-size: 17px;
	font-weight: 600;
	color: #333;
}

.content {
	height: calc(100vh - 44px);
}

.page-content {
	padding: 20px;
	background: #fff;
	margin: 15px;
	border-radius: 12px;
	line-height: 1.6;
}

.page-content :deep(h2) {
	color: #333;
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 15px;
	border-bottom: 2px solid #667eea;
	padding-bottom: 10px;
}

.page-content :deep(h3) {
	color: #666;
	font-size: 16px;
	font-weight: 500;
	margin: 20px 0 10px 0;
}

.page-content :deep(p) {
	color: #666;
	font-size: 14px;
	margin-bottom: 10px;
	text-indent: 0;
}
</style>
